<template>
  <a-date-picker
    v-model="value"
    :class="width===0?'wfull':'w'+width"
    format="YYYY年MM月DD日"
    :disabled="disabled">
  </a-date-picker>
</template>

<script>
import moment from 'moment'
const defaultVal = ''
const fmt = 'YYYY-MM-DD'
export default {
  model: {
    prop: 'modelVal', // 指向props的参数名
    event: 'change'// 事件名称
  },
  props: {
    modelVal: {
      type: String,
      default: defaultVal
    },
    width: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      value: null
    }
  },
  mounted () {
    this.setValue()
  },
  watch: {
    modelVal () {
      this.setValue()
    },
    value (newVal) {
      this.$emit('change', newVal === null ? '' : newVal.format(fmt))
    }
  },
  methods: {
    setValue () {
      if (!this.modelVal || this.modelVal.length === 0) {
        this.value = null
      } else {
        this.value = moment(this.modelVal, fmt)
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
